<template>
  <h2>Static Asset Handling</h2>
  <p>
    Fonts should be italic if font asset reference from CSS works.
  </p>
  <p class="asset-import">
    Path for assets import from js: <code>{{ filepath }}</code>
  </p>
  <p>
    Relative asset reference in template:
    <img class="relative-import" src="./nested/testAssets.png" data-src="./nested/testAssets.png" style="width: 30px;" />
  </p>
  <p>
    Absolute asset reference in template:
    <img src="/icon.png" style="width: 30px;" />
  </p>
  <div class="css-bg">
    <span style="background: #fff;">CSS background</span>
  </div>
  <div class="css-import-bg">
    <span style="background: #fff;">CSS background with relative paths</span>
  </div>
  <div class="css-bg-data-uri">
    <span style="background: #fff;">CSS background with Data URI</span>
  </div>
</template>

<script>
import './testAssets.css'
import filepath from './nested/testAssets.png'

export default {
  data() {
    return {
      filepath
    }
  }
}
</script>

<style>
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Italic.woff2?#iefix') format('woff2'),
    url('/fonts/Inter-Italic.woff') format('woff');
}

body {
  font-family: 'Inter';
}
.css-bg {
  background: url(/icon.png);
  background-size: 10px;
}
.css-bg-data-uri {
  background: url();
  background-size: 10px;
}
</style>
